<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>underline animate effect</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="indicator"></div>
    <div class="wrapper">
      <p>
        <span
          >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum aut
          aliquam blanditiis deleniti est quasi? At culpa delectus inventore
          laborum aperiam temporibus optio excepturi laudantium corporis!
          Laborum cumque sed corporis error omnis! Nobis sed ratione animi
          soluta quas, eum quasi similique debitis tempora saepe nesciunt sunt
          laborum distinctio necessitatibus esse.</span
        >
      </p>
      <ul class="wonder">
        <li><input type="radio" name="item" checked />选项1</li>
        <li><input type="radio" name="item" />选项2</li>
        <li><input type="radio" name="item" />选项3</li>
        <li><input type="radio" name="item" />选项4</li>
        <li><input type="radio" name="item" />选项5</li>
      </ul>
      <p>
        <input
          type="search"
          name="search"
          id="search"
          placeholder="输入内容即可搜索"
        />
      </p>
      <p id="target">
        上面输入框可以输入任意这段内容中出现的文字或者单词，然后回车确认，就会看到文字有高亮效果。但是，这种高亮效果既不是文字选中，也不是通过包裹标签元素实现的，直接覆盖在上面，然后通过叠加这种混合模式实现的，这里的overlay叠加混合模式适合浅色文字，如果是深色文字，可以使用其他混合模式实现，例如lighten。
      </p>
      <img
        src="zxx.jgg"
        alt="CSS新世界封面"
        onerror="this.classList.add('error')"
      />
      <div class="space"></div>
    </div>

    <script
      src="../../assets/js/张鑫旭/overlay.js"
      type="text/javascript"
    ></script>
    <script>
      const target = document.getElementById("target");
      const search = document.getElementById("search");
      overlay(search, target);
    </script>
    <!-- <script src="./script.js" type="text/javascript"></script> -->
  </body>
</html>
